<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--bootstrap-addtabs-->
	<script type="text/javascript" src="../plugins/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../plugins/bootStrap-addTabs/bootstrap.addtabs.css"/>
	<!--bootstrap-table-->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-table/dist/bootstrap-table.css" />
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/bootstrap-table.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <!--bootstrap-toastr-->
    <script type="text/javascript" src="../plugins/toastr/toastr.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../plugins/toastr/toastr.css" />
	<!--bootstrap-dialog-->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-dialog/dist/css/bootstrap-dialog.css" />
	<script type="text/javascript" src="../plugins/bootstrap-dialog/dist/js/bootstrap-dialog.js"></script>

    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" >
<!--   .box-body -->

                    <div class="box-header with-border">
                        <h3 class="box-title">商品类型模板管理</h3>
                    </div>

                    <div class="box-body">

<!--                         数据表格 -->
                        <div class="table-box">

<!--                            工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建"  data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>

                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    分类模板名称：<input  >
                                    <button class="btn btn-default">查询</button>
                                </div>
                            </div>
<!--                            &lt;!&ndash;工具栏/&ndash;&gt;-->

<!--			                  &lt;!&ndash;数据列表&ndash;&gt;-->
<!--			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">-->
<!--			                      <thead>-->
<!--			                          <tr>-->
<!--			                              <th class="" style="padding-right:0px">-->
<!--			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">-->
<!--			                              </th>-->
<!--										  <th class="sorting_asc">模板ID</th>-->
<!--									      <th class="sorting">分类模板名称</th>-->
<!--									      <th class="sorting">关联品牌</th>-->
<!--									      <th class="sorting">关联规格</th>-->
<!--									      <th class="sorting">扩展属性</th>-->
<!--					                      <th class="text-center">操作</th>-->
<!--			                          </tr>-->
<!--			                      </thead>-->
<!--			                      <tbody>-->
<!--			                          <tr>-->
<!--			                              <td><input  type="checkbox"></td>-->
<!--				                          <td>1</td>-->
<!--									      <td>手机</td>-->
<!--									      <td>联想,华为,中兴</td>-->
<!--									      <td>网络制式</td>-->
<!--									      <td></td>-->
<!--		                                  <td class="text-center">-->
<!--		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>-->
<!--		                                  </td>-->
<!--			                          </tr>-->
<!--									  <tr>-->
<!--			                              <td><input  type="checkbox"></td>-->
<!--				                          <td>2</td>-->
<!--									      <td>服装</td>-->
<!--									      <td>七匹狼,雅戈尔</td>-->
<!--									      <td>服装尺码</td>-->
<!--									      <td></td>-->
<!--		                                  <td class="text-center">-->
<!--		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>-->
<!--		                                  </td>-->
<!--			                          </tr>-->
<!--			                      </tbody>-->
<!--			                  </table>-->
			                  <!--数据列表/-->


                        </div>
                        <!-- 数据表格 /-->




                     </div>
                    <!-- /.box-body -->



<!--                                -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">

			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
		      		<td><input  class="form-control"  id="name" placeholder="商品类型">  </td>
		      	</tr>
		      	<tr>
		      		<td>关联品牌</td>
		      		<td>
                        <select id="brands" style="width: 100%" multiple>
                            <option th:each="brand : ${brandList}" th:value="${brand.id}" >
                                [[${brand.name}]]
                            </option>
                        </select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="spec" style="width: 100%" multiple>
							<option th:each="spec : ${specList}" th:value="${spec.id}" >
								[[${spec.specName}]]
							</option>
						</select>
		      		</td>
		      	</tr>

		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>

                        </div>
						<table class="table table-bordered table-striped"  width="800px">
							<thead>
								<tr>
								    <td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>
									<td>操作</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" id="add1" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control"  id = "add2" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
							</tbody>
						</table>

		      		</td>
		      	</tr>

			 </table>

		</div>
		<div class="modal-footer">
			<button class="btn btn-success" data-dismiss="modal"  onclick="save()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
<!--         回显         -->
<div class="modal fade" id="updateEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabels">商品类型模板增加</h3>
			</div>
			<div class="modal-body">
				<input type="hidden" name="id" id="typeId">
				<table class="table table-bordered table-striped" width="800px">
					<tr>
						<td>商品类型</td>
						<td><input  class="form-control" id="name1" name="name" placeholder="商品类型">  </td>
					</tr>
					<tr>
						<td>关联品牌</td>
						<td>
							<select id="brand2" style="width: 100%" multiple>
								<option th:each="bran : ${brandList}" th:value="${bran.id}">[[${bran.name}]]</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>关联规格</td>
						<td>
							<select id="spec2" style="width: 100%" multiple>
								<option th:each="spe:${specList}" th:value="${spe.id}">[[${spe.specName}]]</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>扩展属性</td>
						<td>
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
							</div>
							<table class="table table-bordered table-striped"  width="800px">
								<thead>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>
									<td>操作</td>
								</tr>
								</thead>
								<tbody id="type2">
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" id="td1" name="td1" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" id="td2" name="td2" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toTypeUpdate()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<script>
    $(function (){
        $("#brands").select2();
        $("#spec").select2();
		$("#brand2").select2();
		$("#spec2").select2();
    })
	//修改
	function toTypeUpdate() {
		// 获取 先选择的数据集    Brand
		var brandSelect = $("#brand2").select2("data");
		// 定义数组  存放 遍历选择的数据
		var brandList = [];
		for (var i = 0; i < brandSelect.length; i++) {
			var brands = {id:brandSelect[i].id,text:brandSelect[i].text.trim()}
			brandList.push(brands);
		}
		// 将数据转为 json 字符串
		var brandJson = JSON.stringify(brandList);
		console.log(brandJson);

		//                specs
		var specSelect = $("#spec2").select2("data");
		var specList = [];
		for (var i = 0; i <specSelect.length ; i++) {
			var specs = {id:specSelect[i].id,text:specSelect[i].text.trim()}
			specList.push(specs);
		}
		var specJson = JSON.stringify(specList);
		console.log(specJson)
		//            types
		// 先把前端的对象转换成 字符串   然后后端再进行处理
		var typeList = [];
		var type1 = {text:$("#td1").val()}
		var type2 = {text:$("#td2").val()}

		typeList.push(type1);
		typeList.push(type2);
		var typeListJson = JSON.stringify(typeList);
		console.log(typeListJson)
		$.ajax({
			url : "/tbTypeTemplateController/updateTypeInfo",
			type : "post",
			dataType : "json",
			async : true,
			data : {id:$("#typeId").val(),name:$("#name1").val(),specIds:specJson,brandIds:brandJson,customAttributeItems:typeListJson},
			success : function (result) {
				if (result.code == 10000){
					window.location.reload();
					alert(result.message);
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,修改失败");
			}
		})
	}

	//增加
    function save(){
     var  select =  $("#brands").select2("data");
        var brandList = [];
        for (i=0; i<select.length;i++){
            var brand ={id:select[i].id,text:select[i].text.trim()}//,.trim去掉空格
            brandList.push(brand);
        }
        var brandListJson =  JSON.stringify(brandList);//将json转为字符串
		console.log(brandListJson)
		var select2 =$("#spec").select2("data");
	 var specList =[]
		for (j=0;j<select2.length;j++){
			var spec = {id:select2[j].id,text:select2[j].text.trim()}
			specList.push(spec);
		}
		 var specListJson= JSON.stringify(specList);
		console.log(specListJson);
		var name = $("#name").val();
		 console.log(name);
		  var add1 = $("#add1").val();
		  console.log(add1);
		  var add2 =$("#add2").val();
		var str = '[{"text":'+'"'+add1 +'"'+'},{"text":'+'"'+add2 +'"'+'}]';
		alert(str)
			var add1 =JSON.stringify(add1)
		  console.log(add1,add2)
		$.ajax({
			url:"/tbTypeTemplateController/toAddTemp",
			type:"post",
			dataType:"json",
			async:false,
			data:{name:$("#name").val(),specIds:brandListJson,brandIds:specListJson,customAttributeItems:str},
		})
	}



	$(function (){
		$("#table").bootstrapTable({
			url : "/tbTypeTemplateController/findTemp",  //请求地址
			toolbar : "#toolbar",
			method : "GET", //请求方式
			striped : true, //是否显示行间隔色
			cache : false,  //是否使用缓存,默认为true,一般需要设置为false
			pagination : true, //是否显示分页
			sortOrder : "asc",//排序方式
			sortName  : "id",//排序字段
			sidePagination :"client",//分页方式:client客户端分页,server服务端分页(*)
			pageNumber :1,//初始化加载第一页,默认第一页,并记录
			pageSize : 5,//每页记录行数(*)
			pageList:[1, 3, 5, 8],//可供选择的每页行数
			// showColumns : true, //是否显示所有的列(选择显示的列)
			// showRefresh : true, //是否显示刷新按钮
			minimumCountColumns: 2, //最少允许的列数
			// clickToSelect : true,   //是否启用点击选中行
			uniqueId: "id", //每一行的唯一标识,一般为主键列
			// showToggle : true,  //是否显示详细视图和列表视图的切换按钮
			//cardView : true   //是否显示详细视图
			// detailView: true,//是否显示父子表
			//querParams作用是给后台传递查询条件//
			// queryParams : function (params){
			// 	var temp = {
			// 		pageNum : (params.offset / params.limit) + 1,
			// 		pageSize : params.limit,
			// 		rname : $("#txt_search_departmentname").val(),
			// 		cid : $("#txt_search_departmenttype").val(),
			// 		rflag : $("#txt_search_departmentflag").val(),
			// 		sid : $("#txt_search_departmentseller").val()
			// 	}
			// 	return temp;
			// },
			columns : [
				{
					checkbox : true
				},{
					field : "id",
					title : "模板ID"
				},{
					field : "name",
					title : "分类模板名称",

				},{
					field : "specIds",
					title : "关联品牌",
                    formatter : function (value,row,index){
                        var typeJson = JSON.parse(value);
                        var str = "";
                        for (var i = 0; i < typeJson.length; i++) {
                            str += ","+typeJson[i].text;
                        }
                        str = str.substr(1);
                        return str;
                    }
					},{
					field : "brandIds",
					title : "关联规格",
                    formatter : function (value,row,index){
                        var typeJson = JSON.parse(value);
                        var str = "";
                        for (var i = 0; i < typeJson.length; i++) {
                            str += ","+typeJson[i].text;
                        }
                        str = str.substr(1);
                        return str;
                    }
				},{
					field : "customAttributeItems",
					title : "拓展属性",
                    formatter : function (value,row,index){
                        var typeJson = JSON.parse(value);
                        var str = "";
                        for (var i = 0; i < typeJson.length; i++) {
                            str += ","+typeJson[i].text;
                        }
                        str = str.substr(1);
                        return str;
                    }
				},{
					field : "id",
					title : "操作",
					formatter : function (value, row, index){
						var id = value;
						var result = "";
						result += "<button type='button' class='btn bg-olive btn-xs' data-toggle='modal' onclick='toUpdate(" + id + ")'  data-target='#updateEditModal'>修改</button>"
						result += "<button type='button' class='btn bg-olive btn-xs' data-toggle='modal' onclick='deleteById(" + id + ")'  title='删除' <span class='glyphicon glyphicon-remove' style='color: rgb(255, 0, 0);'></span>删除</button>"
						return result;
					}
				}
			]
		})
	})
	function refresh(){
		$("#table").bootstrapTable('refresh')
	}
	//回显
	function toUpdate(id) {
		alert(111)
		$.ajax({
			url: "/tbTypeTemplateController/echoTemp/" + id,
			dataType: "json",
			type: "get",
			async: false,
			success: function (result) {
				var type = result.rows;
				//   brand
				var brands = type.brandIds;
				var brandJson = JSON.parse(brands);
				var brandss = [];
				for (var i = 0; i < brandJson.length; i++) {
					brandss.push(brandJson[i].id);
				}
				// select2 提供的回显方法
				$("#brand2").val(brandss).trigger("change");

				//   spec
				var specs = type.specIds;
				// 将数据转为 json
				var specJson = JSON.parse(specs);
				// 定义数组  存放 遍历选择的数据
				var specss = [];
				for (var i = 0; i < specJson.length; i++) {
					specss.push(specJson[i].id);
				}
				$("#spec2").val(specss).trigger("change");

				//   type
				$("#typeId").val(type.id);
				$("#name1").val(type.name);

				var custom = type.customAttributeItems;
				var customJson = JSON.parse(custom);
				if (customJson.length==1){
					$("#td1").val(customJson[0].text);
				}else if (customJson.length==2){
					$("#td1").val(customJson[0].text);
					$("#td2").val(customJson[1].text);
				}
			},
			error : function (result) {
				alert("网络错误");
			}
		})
    }
	//删除
    function deleteById(id) {
    	alert(1111);
		$.ajax({
			url : "/tbTypeTemplateController/deleteTypeInfo?id="+id,
			type : "post",
			dataType : "json",
			async : true,
			success : function (result) {
				if (result.code == 10000){
					window.location.reload();
					alert(result.message);
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,删除失败");
			}
		})
	}

    //增加
    function toAdd(){
	    alert(11111);
        BootstrapDialog.show({
            title : "增加",
            message : $('<div></div>').load('/tbTypeTemplateController/toadd'),
            closable : true,
            size: BootstrapDialog.SIZE_WIDE,
            buttons : [{
                label : "取消",
                action : function (dialog){
                    dialog.close();
                }
            },{
                label : "确认",
                action : function (dialog){
                    $.ajax({
                        url : "/tabRoute/addRoute",
                        data : $("#addForm").serialize(),
                        type : "get",
                        dataType : "json",
                        success : function (result){
                            dialog.close();
                            refresh()
                            toastr.error("增加成功")
                        },
                        error : function (result){
                            toastr.error("增加失败")
                        }
                    })
                }
            }
            ]
        })
    }
</script>
<table id="table">
</table>
</body>
</html>